<template>
  <div class="meet-container">
    <div class="columns">
      <section class="left-panel">
        <h2>会议分析</h2>

        <div class="controls">
          <button class="btn primary" @click="startRecording">
            {{ recordText }}
          </button>
          <button class="btn" @click="stopRecording">停止录音</button>
        </div>

        <div class="card">
          <h3>实时识别结果</h3>
          <div class="result-text">{{ resultText }}</div>
        </div>

        <div v-if="recordedAudioUrl" class="card">
          <h3>录音回放</h3>
          <audio :src="recordedAudioUrl" controls />
        </div>
      </section>

      <section class="right-panel">
        <h2>AI 智能总结</h2>

        <div class="card">
          <div class="summary-actions">
            <button class="btn primary" @click="generateSummary">
              {{ isGenerating ? "生成中..." : "生成总结" }}
            </button>
            <span class="tip">基于左侧识别结果手动生成会议摘要与行动项</span>
          </div>
        </div>

        <div class="card">
          <h3>生成结果</h3>
          <div v-if="aiSummaryData" class="summary-text">
            <p><strong>主题：</strong>{{ aiSummaryData.topic }}</p>
            <p><strong>摘要：</strong>{{ aiSummaryData.summary }}</p>
          </div>
          <p v-else class="placeholder">
            暂无总结，请先在左侧进行录音识别并点击上方“生成总结”。
          </p>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useXfAsr } from "@/hooks/useXfAsr.js";
import { getAISummary } from "@/api";

const {
  startRecording,
  stopRecording,
  recordText,
  resultText,
  recordedAudioUrl
} = useXfAsr();

interface AiSummary {
  topic: string;
  summary: string;
}

const aiSummaryData = ref<AiSummary | null>(null);
const isGenerating = ref(false);

function generateSummary() {
  if (isGenerating.value) return;
  isGenerating.value = true;

  // 简单本地摘要：按常见标点拆分句子，取前 5 条生成条目
  const source = String(resultText.value || "").trim();
  if (!source) {
    aiSummaryData.value = null;
    isGenerating.value = false;
    return;
  }

  getAISummary({ content: source })
    .then(res => {
      // 期望后端返回形如：{ code: 200, data: { topic, summary }, message: 'ok' }
      const data = (res as any)?.data;
      aiSummaryData.value = data || null;
      isGenerating.value = false;
    })
    .catch(() => {
      isGenerating.value = false;
    });
}
</script>

<style scoped>
.meet-container {
  height: 80%;
  padding: 16px;
  margin: 0 auto;
}

.columns {
  display: flex;
  gap: 16px;
}

.left-panel,
.right-panel {
  height: 740px;
  padding: 16px;
  background: var(--el-bg-color, #fff);
  border: 1px solid var(--el-border-color, #ebeef5);
  border-radius: 8px;
}

.left-panel {
  flex: 2;
  min-width: 360px;
  height: 740px;
}

.right-panel {
  flex: 1;
  min-width: 300px;
}

h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.btn {
  height: 36px;
  padding: 0 8px;
  cursor: pointer;
  background: var(--el-bg-color, #fff);
  border: 1px solid var(--el-border-color, #dcdfe6);
  border-radius: 6px;
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn.primary {
  color: #fff;
  background: var(--el-color-primary, #409eff);
  border-color: var(--el-color-primary, #409eff);
}

.card {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--el-bg-color, #fff);
  border: 1px solid var(--el-border-color, #ebeef5);
  border-radius: 8px;
}

.result-text {
  min-height: 360px;
  padding: 8px 10px;
  line-height: 1.75;
  color: #333;
  white-space: pre-wrap;
  background: var(--el-fill-color-blank, #fafafa);
  border-radius: 6px;
}

.summary-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tip {
  font-size: 12px;
  color: #888;
}

.summary-text {
  line-height: 1.75;
  color: #333;
}

.download {
  display: inline-block;
  margin-top: 8px;
  color: var(--el-color-primary, #409eff);
}

.placeholder {
  color: #888;
}

@media (width <= 992px) {
  .columns {
    flex-direction: column;
  }
}
</style>
